Framer Motion — Animation Events

With the Framer Motion library, we can render animations in our React app easily.

In this article, we’ll take a look at how to get started with Framer Motion.

Animation Events

We can listen to various animation events emitted from our motion components.

For example, we can write:

import React from "react";
import { motion } from "framer-motion";

function onUpdate(latest) {
  console.log(latest.x, latest.opacity);
}

export default function App() {
  return (
    <motion.div
      onUpdate={onUpdate}
      animate={{ x: 100, opacity: 0 }}
      style={{ backgroundColor: "red", width: 100, height: 100 }}
    ></motion.div>
  );
}

to pass in the onUpdate function into the onUpdate prop.

The latest parameter has the x coordinate value and the opacity which is logged when the animation is running.

onAnimationStart

The onAnimationStart prop takes a callback that’s run when the animation starts.

For example, we can write:

import React from "react";
import { motion } from "framer-motion";

function onStart() {
  console.log("Animation statted");
}

export default function App() {
  return (
    <motion.div
      onAnimationStart={onStart}
      animate={{ x: 100, opacity: 0 }}
      style={{ backgroundColor: "red", width: 100, height: 100 }}
    ></motion.div>
  );
}

We pass in the onStart function into the onAnimationStart prop to log some output when the animation starts.

onAnimationComplete

The onAnimationComplete prop takes a function that’s run when the animation is done.

For example, we can write:

import React from "react";
import { motion } from "framer-motion";

function onComplete() {
  console.log("Animation completed");
}

export default function App() {
  return (
    <motion.div
      onAnimationComplete={onComplete}
      animate={{ x: 100, opacity: 0 }}
      style={{ backgroundColor: "red", width: 100, height: 100 }}
    ></motion.div>
  );
}

to log something when the animation is done.

Hover Events

We can listen for hover events with Framer Motion.

onHoverStart(event, info)

The onHoverStart prop lets us listen for hover events when they start.

For example, we can write:

import React from "react";
import { motion } from "framer-motion";

export default function App() {
  return (
    <motion.div
      onHoverStart={() => console.log("Hover starts")}
      style={{ backgroundColor: "red", width: 100, height: 100 }}
    ></motion.div>
  );
}

When we hover over the div, ‘Hover starts’ is logged.

onHoverEnd(event, info)

We can listen for hover end events with the onHoverEnd prop.

For instance, we can write:

import React from "react";
import { motion } from "framer-motion";

export default function App() {
  return (
    <motion.div
      onHoverEnd={() => console.log("Hover ends")}
      style={{ backgroundColor: "red", width: 100, height: 100 }}
    ></motion.div>
  );
}

Now when we move the mouse from the div to outside of the div, we see ‘Hover ends’ logged.

onTap(event, info)

The onTap prop lets us listen for taps.

For instance, we can write:

import React from "react";
import { motion } from "framer-motion";

function onTap(event, info) {
  console.log(info.point.x, info.point.y);
}

export default function App() {
  return (
    <motion.div
      onTap={onTap}
      style={{ backgroundColor: "red", width: 100, height: 100 }}
    ></motion.div>
  );
}

Then we log the coordinate of the tap with the info.point property.

Conclusion

We can listen for various events with Framer Motion.